<template>
  <div class="view-container">
    <header-module
      :left-custom="true"
      :padding="true"
    >
      <template #left-con>
        <div style="display: flex;align-items: center;">
          <span style="font-size: 16px; margin-right: 20px">申请配送商
            {{ distributorInfo?.distributeName }}</span>
          <el-tag
            type="warning"
            size="small"
          >
            <div style="display:flex;align-items:center;">
              <div>{{ getLabel('apply_distributor_status',distributorInfo?.disApplyStatus) }}</div>
            </div>
          </el-tag>
        </div>
      </template>
      <template
        v-if="distributorInfo"
        #btn
      >
        <el-button
          class="border-btn"
          size="small"
          @click="back"
        >返回</el-button>
        <el-button
          v-auth="{v: ['crm:distributor:applyDistributor:complete'], bool: distributorInfo.disApplyStatus==='0'}"
          type="primary"
          size="small"
          @click="completeDeal"
        >完成处理</el-button>
      </template>
    </header-module>
    <div class="main-content">
      <apply-base-info
        v-if="distributorInfo"
        :detail="distributorInfo"
      />
    </div>
    <deal-apply
      ref="dealApplyDialog"
      @refresh="refreshDetail"
    />
  </div>
</template>

<script>
import {defineAsyncComponent, getCurrentInstance, inject, onMounted, reactive, toRefs,} from 'vue'
import {useRoute, useRouter} from 'vue-router'

export default {
  name: 'ApplyDistributorsDetail',
  components: {
    applyBaseInfo: defineAsyncComponent(() =>
      import('../modules/applyBaseInfo.vue')
    ),
    dealApply: defineAsyncComponent(() => import('../modules/dealApply.vue')),
  },
  setup(props, context) {
    const router = useRouter()
    const route = useRoute()
    const currentInstance = getCurrentInstance()
    const api = inject('api')
    var datas = reactive({
      dealApplyDialog: null,
      id: Number(route.query.id) || 0,
      distributorInfo: null,
    })
    const back = () => {
      router.back()
    }
    const completeDeal = () => {
      datas.dealApplyDialog.open(datas.distributorInfo)
    }
    const getApplyDetail = () => {
      api.distributors
        .DISTRIBUTORS_APPLAY_DETAIL({ id: datas.id })
        .then((res) => {
          if (res.code === 0) {
            console.log(res.data)
            datas.distributorInfo = res.data || null
          }
        })
    }
    const refreshDetail = () => {
      getApplyDetail()
    }
    onMounted(() => {
      getApplyDetail()
    })
    return {
      ...toRefs(datas),
      back,
      getApplyDetail,
      completeDeal,
      refreshDetail,
    }
  },
}
</script>
